<template>
  <div class="container">
    <a-row :gutter="[16, 24]">
      <a-col :span="4" v-for="(item, index) in videoList" :key="index">
        <a-card class="video-item" :bordered="false">
          <a-skeleton :loading="loading[loadingIndex - 1]" active>
            <div>
              <div @click="enterDetails(item)">
                <div class="image-div">
                  <!-- <img  :src="require(item.cover)" crossorigin="anonymous"/> -->
                  <img :src="item.cover" crossorigin="anonymous" />
                  <PlayCircleOutlined class="play" />
                </div>
                <span class="video-title" :title="item.title">{{ item.title }}</span>
              </div>
              <div class="uploader" :title="item.uploader" @click="enterUploaderSpace(item.uploaderId)">
                <span style="width: fit-content;">{{ item.uploader }}</span>
                <span>·</span>
                <span>{{ item.uploadTime }}</span>
              </div>
            </div>
          </a-skeleton>

        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed , onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { PlayCircleOutlined } from '@ant-design/icons-vue';
import { userRecommend , videoRecommend} from '@/api/video.js';
import { formatDate } from '@/utils/dateFormat.js';
import { useStore } from 'vuex';
import { debounce } from '@/utils/debounce';

const router = useRouter();
let videoList = reactive([])
const store = useStore();
const loading = ref([]);
const loadingIndex = ref(1);
onMounted(() => {
  init();
  window.addEventListener('scroll',scrollListener);
});

//首页已加载的视频不再显示
const videoPageList = {
  userId: store.getters['user/id'],
  notIncludeIds: []
}
/**
 * 页面初始化
 */
const init = () => {

  loading.value[loadingIndex.value] = true;

  userRecommend(videoPageList).then(res => {

    if(res.data && res.data.length == 0){
      window.removeEventListener('scroll',scrollListener);
    }

    videoList.push(...res.data.map(item => {
      return {
        cover: process.env.VUE_APP_VIDEO_PROXY_TARGET + "/image/" + item.cover,
        title: item.title,
        uploader: item.user_name,
        uploadTime: formatDate(item.upload_time),
        videoId: item.video_id,
        id: item.id,
        uploaderId: item.upload_user_id
      }
    }
    )
    );

    videoPageList.notIncludeIds.push(...res.data.map( item => item.id));

  })
  .finally(() => {
    loading.value[loadingIndex.value] = false;
    loadingIndex.value++;
  });
}

/**
 * 监听页面滚轮变化
 */
const scrollListener = () => {

  var windowHeight = document.body.clientHeight || document.documentElement.clientHeight;

  var elementHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
  var scrollHeight = document.body.scrollTop || document.documentElement.scrollTop;

  if (windowHeight + scrollHeight + 2 > elementHeight) {
    console.log('到底了');
    debounceFunc.apply(null, []);
  }

}

const debounceFunc = debounce(() => {
  init();
},300)

/**
 * 进入视频详情页面
 * @param {String} videoId 视频id
 * @param {Number} id 视频序列id
 */
const enterDetails = (item) => {
  router.push({
    path: `/details/${item.videoId}`, query:{id: item.id, title: item.title}
  });
}

/**
 * 进入视频上传者个人空间
 * @param {String} uid 
 */
const enterUploaderSpace = (uid) => {
  const page = router.resolve({path: `/space/${uid}`});
  window.open(page.href,'_blank');
}
onBeforeUnmount(() => {
  window.removeEventListener('scroll',scrollListener);
})

</script>
<style>

:root{
  --color: #2bb3eb;
}

.container {
  margin-top: 20px;
  padding: 1%;
}

.container .video-item {
  max-height: 180px;
  cursor: pointer;
  overflow: hidden;
}

.image-div {
  border-radius: 7px;
  overflow: hidden;
  max-height: 107px;

}

.container .video-item:hover {
  background: gainsboro;
}

.container .video-item:hover .play {
  opacity: 0.7;
}

.container .video-item .play {
  font-size: 40px;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  color: white;
  opacity: 0;
  transition: 0.5s opacity;
}

.container .video-item .video-title{
  font-weight: bold;
  font-size: 15px;
}


.container .video-item .uploader {
  width: 100%;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  white-space: nowrap;
}

.container .video-item .video-title:hover , .container .video-item .uploader:hover{

  color: var(--color);
}

img {
  width: 100%;
  height: 100%;
}</style>